<template>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 100%; height: 100%"></div>
</template>

<script>
export default {
    data() {
        return {
            newData: [],
            xData: [],
            yData: []
        };
    },
    mounted() {
        this.initEcharts();
    },
    methods: {
        init() {
            this.newData = [
                {
                    name: '-200',
                    value: 0
                },
                {
                    name: '-197.3',
                    value: 0
                },
                {
                    name: '-194.6',
                    value: 0
                },
                {
                    name: '-191.9',
                    value: 0
                },
                {
                    name: '-189.2',
                    value: 0
                },
                {
                    name: '-186.5',
                    value: 0
                },
                {
                    name: '-183.8',
                    value: 0
                },
                {
                    name: '-181.1',
                    value: 0
                },
                {
                    name: '-178.4',
                    value: 0
                },
                {
                    name: '-175.7',
                    value: 0
                },
                {
                    name: '-173',
                    value: 0
                },
                {
                    name: '-170.3',
                    value: 0
                },
                {
                    name: '-167.6',
                    value: 0
                },
                {
                    name: '-164.9',
                    value: 0
                },
                {
                    name: '-162.2',
                    value: 1
                },
                {
                    name: '-159.5',
                    value: 9
                },
                {
                    name: '-156.8',
                    value: 18
                },
                {
                    name: '-154.1',
                    value: 13
                },
                {
                    name: '-151.4',
                    value: 7
                },
                {
                    name: '-148.7',
                    value: 3
                },
                {
                    name: '-146',
                    value: 2
                },
                {
                    name: '-143.3',
                    value: 3
                },
                {
                    name: '-140.6',
                    value: 4
                },
                {
                    name: '-137.9',
                    value: 4
                },
                {
                    name: '-135.2',
                    value: 9
                },
                {
                    name: '-132.5',
                    value: 15
                },
                {
                    name: '-129.8',
                    value: 11
                },
                {
                    name: '-127.1',
                    value: 11
                },
                {
                    name: '-124.4',
                    value: 18
                },
                {
                    name: '-121.7',
                    value: 20
                },
                {
                    name: '-119',
                    value: 18
                },
                {
                    name: '-116.3',
                    value: 33
                },
                {
                    name: '-113.6',
                    value: 58
                },
                {
                    name: '-110.9',
                    value: 45
                },
                {
                    name: '-108.2',
                    value: 44
                },
                {
                    name: '-105.5',
                    value: 25
                },
                {
                    name: '-102.8',
                    value: 53
                },
                {
                    name: '-100.1',
                    value: 51
                },
                {
                    name: '-97.4',
                    value: 26
                },
                {
                    name: '-94.7',
                    value: 25
                },
                {
                    name: '-92',
                    value: 13
                },
                {
                    name: '-89.3',
                    value: 16
                },
                {
                    name: '-86.6',
                    value: 47
                },
                {
                    name: '-83.9',
                    value: 16
                },
                {
                    name: '-81.2',
                    value: 9
                },
                {
                    name: '-78.5',
                    value: 9
                },
                {
                    name: '-75.8',
                    value: 10
                },
                {
                    name: '-73.1',
                    value: 36
                },
                {
                    name: '-70.4',
                    value: 39
                },
                {
                    name: '-67.7',
                    value: 25
                },
                {
                    name: '-65',
                    value: 28
                },
                {
                    name: '-62.3',
                    value: 71
                },
                {
                    name: '-59.6',
                    value: 10
                },
                {
                    name: '-56.9',
                    value: 8
                },
                {
                    name: '-54.2',
                    value: 28
                },
                {
                    name: '-51.5',
                    value: 33
                },
                {
                    name: '-48.8',
                    value: 68
                },
                {
                    name: '-46.1',
                    value: 18
                },
                {
                    name: '-43.4',
                    value: 22
                },
                {
                    name: '-40.7',
                    value: 126
                },
                {
                    name: '-38',
                    value: 79
                },
                {
                    name: '-35.3',
                    value: 66
                },
                {
                    name: '-32.6',
                    value: 11
                },
                {
                    name: '-29.9',
                    value: 2
                },
                {
                    name: '-27.2',
                    value: 2
                },
                {
                    name: '-24.5',
                    value: 1
                },
                {
                    name: '-21.8',
                    value: 0
                },
                {
                    name: '-19.1',
                    value: 0
                },
                {
                    name: '-16.4',
                    value: 2
                },
                {
                    name: '-13.7',
                    value: 0
                },
                {
                    name: '-11',
                    value: 2
                },
                {
                    name: '-8.3',
                    value: 0
                },
                {
                    name: '-5.6',
                    value: 0
                },
                {
                    name: '-2.9',
                    value: 0
                },
                {
                    name: '-0.2',
                    value: 2
                },
                {
                    name: '2.5',
                    value: 2
                },
                {
                    name: '5.2',
                    value: 0
                },
                {
                    name: '7.9',
                    value: 0
                },
                {
                    name: '10.6',
                    value: 1
                },
                {
                    name: '13.3',
                    value: 1
                },
                {
                    name: '16',
                    value: 0
                },
                {
                    name: '18.7',
                    value: 0
                },
                {
                    name: '21.4',
                    value: 0
                },
                {
                    name: '24.1',
                    value: 0
                },
                {
                    name: '26.8',
                    value: 0
                },
                {
                    name: '29.5',
                    value: 0
                },
                {
                    name: '32.2',
                    value: 0
                },
                {
                    name: '34.9',
                    value: 0
                },
                {
                    name: '37.6',
                    value: 0
                },
                {
                    name: '40.3',
                    value: 0
                },
                {
                    name: '43',
                    value: 0
                },
                {
                    name: '45.7',
                    value: 0
                },
                {
                    name: '48.4',
                    value: 0
                },
                {
                    name: '51.1',
                    value: 0
                },
                {
                    name: '53.8',
                    value: 0
                },
                {
                    name: '56.5',
                    value: 0
                },
                {
                    name: '59.2',
                    value: 0
                },
                {
                    name: '61.9',
                    value: 0
                },
                {
                    name: '64.6',
                    value: 0
                },
                {
                    name: '其他',
                    value: 27
                }
            ];
            this.xData = this.newData.map((a) => a.name);
            this.yData = this.newData.map((a) => a.value);
            let yMax = 150;
            let dataShadow = [];
            for (let i = 0; i < this.yData.length; i++) {
                dataShadow.push(yMax);
            }

            this.initEcharts(this.newData);
        },
        initEcharts() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('main'));
            // 指定图表的配置项和数据
            myChart.setOption({
                title: {
                    text: '贵州茅台关系图'
                },
                tooltip: {},
                animationDurationUpdate: 1500,
                animationEasingUpdate: 'quinticInOut',
                series: [
                    {
                        type: 'graph',
                        layout: 'none',
                        symbolSize: 50,
                        roam: true,
                        label: {
                            normal: {
                                show: true
                            }
                        },
                        edgeSymbol: 'circle', // arrow
                        edgeSymbolSize: 4,
                        edgeLabel: {
                            normal: {
                                textStyle: {
                                    fontSize: 20
                                }
                            }
                        },
                        data: [
                            { name: '子公司', x: 200, y: 0 },
                            { name: '贵州茅台酒销售有限公司', x:100, y: 30 },
                            { name: '贵州茅台酒巴黎贸易有限公司', x: 150, y: 30 },
                            { name: '贵州赖茅酒业有限公司', x: 200, y: 30 },
                            { name: '贵州茅台酱香酒营销有限公司', x: 250, y: 30 },
                            { name: '北京友谊使者商贸有限公司', x: 300, y: 30 },
                            { name: '贵州茅台酒进出口有限责任公司', x: 150, y: 60 },
                            { name: '贵州茅台集团财务有限公司', x: 200, y: 60 },
                            { name: '国酒茅台定制营销(贵州)有限公司', x: 250, y: 60 },
                            { name: '方案1', x: 160, y: 90 },
                            { name: '方案2', x: 210, y: 90 },

                        ],
                        // links: [],
                        links: [
                            {source: '子公司',target: '贵州茅台酒销售有限公司'},
                            { source: '子公司', target: '贵州茅台酒巴黎贸易有限公司' },
                            { source: '子公司', target: '贵州赖茅酒业有限公司' },
                            { source: '子公司', target: '贵州茅台酱香酒营销有限公司' },
                            { source: '子公司', target: '北京友谊使者商贸有限公司' },
                            { source: '贵州赖茅酒业有限公司', target: '贵州茅台酒进出口有限责任公司' },
                            { source: '贵州赖茅酒业有限公司', target: '贵州茅台集团财务有限公司' },
                            { source: '贵州赖茅酒业有限公司', target: '国酒茅台定制营销(贵州)有限公司' },
                            //================================
                            { source: '贵州茅台酒进出口有限责任公司', target: '方案1' },
                            { source: '贵州茅台集团财务有限公司', target: '方案1' },
                            { source: '国酒茅台定制营销(贵州)有限公司', target: '方案1' },
                            // { source: '贵州茅台酱香酒营销有限公司', target: '方案1' },
                            //
                            { source: '贵州茅台酒进出口有限责任公司', target: '方案2' },
                            { source: '贵州茅台集团财务有限公司', target: '方案2' },
                        ],
                        lineStyle: {
                            normal: {
                                opacity: 1,
                                width: 3,
                                curveness: 0,
                                color: {
                                    x: 0,
                                    y: 0,
                                    x2: 2,
                                    y2: 0,
                                    colorStops: [
                                        {offset: 0, color: '#4c84ff'},
                                        {offset: 1, color: '#f07aad'},
                                    ]
                                }
                            },

                        }
                    }
                ]
            });
        }
    }
};
</script>

<style>
</style>
